<template>
  <div class="app-container _system">
    <div class="banner-config content">
      <el-form inline>
        <el-form-item label="标题">
          <el-input placeholder="请输入关键字" v-model="searchInfo.title"></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-select v-model="searchInfo.status">
            <el-option label="全部" value=""></el-option>
            <el-option label="已上架" value="1"></el-option>
            <el-option label="已下架" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="search">筛选</el-button>
        <el-button type="primary" v-if="permissionList.add" @click="bannerEdit" style="float: right;">添加</el-button>
      </el-form>
      <div class="_list">
        <el-table :data="dataList" @selection-change="handleSelectionChange" :height="$tools.tableHeight()" v-loading.body="listLoading" highlight-current-row style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="预览">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" alt="" class="img-preview">
            </template>
          </el-table-column>
          <el-table-column label="生效时间" width="160">
            <template slot-scope="scope">
              {{ dateFormat(new Date(scope.row.takeTime)) }}
            </template>
          </el-table-column>
          <el-table-column label="失效时间" width="160">
            <template slot-scope="scope">
              {{ dateFormat(new Date(scope.row.failureTime)) }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="160">
            <template slot-scope="scope">
              {{ dateFormat(new Date(scope.row.modifyTime || scope.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column label="上架状态">
            <template slot-scope="scope">
              {{ scope.row.status === 1 ? '上架' : '下架' }}
            </template>
          </el-table-column>
          <el-table-column label="编辑" width="160px">
            <template slot-scope="scope">
              <el-button type="text" v-if="permissionList.edit" @click="bannerEdit(scope.row)">编辑</el-button>
              <el-button type="text" v-if="permissionList.delete" @click="arrDelete('1', scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="total" class="pages">
        <div class="right" v-if="total > 0">
          <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :title="editId?'编辑':'新增'" width="600px" :visible.sync="showDialog">
      <banner-edit v-model="showDialog" :form="bannerEditForm" :id="editId" @success="getList"></banner-edit>
    </el-dialog>
  </div>

</template>

<script>
import mixinsTable from '@/util/mixins.table';
import { dateFormat } from '@/util/date';
import { mapGetters } from "vuex";
export default {
  name: 'Banner',
  mixins: [mixinsTable],
  data () {
    return {
      bannerEditForm: {},
      editId: null,
      showDialog: false,
      loading: false,
      searchInfo: {},
      searchField: 'searchInfo',
      APISERVER: 'bannerList',
      DELETEAPI: 'bannerDelete',
    };
  },
  props: {
    value: {
      type: Boolean
    },
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList () {
      return {
        add: this.vaildData(this.permission.banner_add, false),
        delete: this.vaildData(this.permission.banner_delete, false),
        edit: this.vaildData(this.permission.banner_edit, false),
      };
    },
  },
  created () {
    this.getList();
  },
  methods: {
    dateFormat,
    bannerEdit (data) {
      this.showDialog = true;
      this.editId = data.id || null;
      this.bannerEditForm = {
        title: data.title,
        bannerType: data.bannerType,
        status: data.status,
        videoUrl: data.videoUrl,
        imgUrl: data.imgUrl,
        turnUrl: data.turnUrl,
        takeTime: data.takeTime,
        failureTime: data.failureTime,
      };
    }
  }
};
</script>

<style lang="less">
.banner-config {
  padding: 10px;
  ._list {
    margin-top: 10px;
  }
  .img-preview {
    max-width: 100px;
    max-height: 100px;
  }
  .el-form-item__content {
    max-width: 220px;
  }
}
</style>
